import React, { useState } from 'react';
import { axconst } from '@/shared/axconst';
import Search from './components/search';
import Update from './components/update';
import AxColumnAction from '@/components/AxList/AxColumnAction';
import { AxStandardWideList } from '@/components/AxList/AxStandardWideList';

const Index: React.FC<any> = props => {
    const [updateVisible, setUpdateVisible] = useState(false);

    /** 配置列 */
    const columns = [
        {
            title: 'CAS名称',
            dataIndex: 'orgName1',
            width: axconst.width.long,
        },
        {
            title: 'CAS编码',
            dataIndex: 'orgName4',
            width: axconst.width.cas,
        },
        {
            title: '性状',
            dataIndex: 'orgName2',
            width: axconst.width.fouronly,
        },
        {
            title: '单位',
            dataIndex: 'orgName3',
            width: axconst.width.fouronly,
        },
        {
            title: '最大库存',
            dataIndex: 'orgName5',
            width: axconst.width.fouronly,
        },
        {
            title: '空闲库存',
            dataIndex: 'orgName7',
            width: axconst.width.fouronly,
        },
        {
            title: '当前库存',
            dataIndex: 'orgName6',
            width: axconst.width.fouronly,
        },
        {
            title: '操作',
            dataIndex: 'orgName8',
            width: axconst.width.operate8,
            render: (value: any, record: any) => (
                <AxColumnAction
                    buttons={[
                        {
                            text: '调整最大库存',
                            onClick: () => setUpdateVisible(true),
                        },
                    ]}
                />
            ),
        },
    ];

    const data = {
        list: [{
            id: 0,
            orgName1: '浓硫酸',
            orgName2: '液体',
            orgName3: '瓶',
            orgName4: 'AS-322223',
            orgName5: '1000',
            orgName6: '200',
            orgName7: '8000',
            orgName8: '',
        }]
    }

    const updateProps = {
        visible: updateVisible,
        handleVisible: setUpdateVisible,
    }

    return (
        <>
            <AxStandardWideList
                columns={columns}
                data={data}
                AdvancedSearch={Search}
            />
            {updateVisible && <Update  {...updateProps} />}
        </>
    );
};

export default Index;
